<template>drawerBox
  <!-- <teleport to="body" > -->
  <transition name="listDrawerBox" mode="out-in">
    <div class="drawerBox animate__animated" v-if="modelValue">
      <!-- 头部 start -->
      <div class="aic jcb p20">
        <div class="drawerBox-title">
          {{ title }}
        </div>
        <div class="aic jcfend">
          <slot name="operationBotton"> </slot>
          <el-icon size="25px" @click.stop="handleClose" class="cP ml15"
            ><close-bold
          /></el-icon>
        </div>
      </div>
       <slot name="detailSynopsis">  <div class="aic px20">
       
      </div>
         </slot>
    

      <el-tabs v-model="editableTabsValue" class="">
        <el-tab-pane
          v-for="(item, index) in tabs"
          :key="index"
          :label="item.name"
          :name="item.type"
        >
        </el-tab-pane>
      </el-tabs>
      <div class="operationContent">
   <slot name="operationContent" :type="{ editableTabsValue }"> </slot>
      </div>
   
      <!-- 头部 start -->
    </div>
  </transition>

  <!-- </teleport> -->
</template>

<script setup lang="ts">
import { ElMessageBox } from "element-plus";
import {
  ref,
  reactive,
  defineEmits,
  onMounted,
  watch,
  onBeforeMount,
} from "vue";
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const emit = defineEmits(["update:modelValue"]);
const state = reactive({});
const editableTabsValue = ref(0);
let props: any = defineProps({
  modelValue: {
    type: Boolean,
    defalut: false,
  },
  title: {
    type: String,
    defalut: "",
  },
  tabs: {
    type: Object,
    default: [],
  },
});
const editableTabs: any = ref([]);
onBeforeMount(() => {});
onMounted(() => {
  if (props.tabs.length > 0) {
    editableTabsValue.value = props.tabs[0].type;
  }
});
// watch(
//   () => porps.modelValue,
//   (val) => {
//     emit("update:modelValue", val);
//   }
// );
const handleClose = () => {
    ElMessageBox.confirm(
    '确定关闭弹框?',
    '警示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      emit("update:modelValue", false);
    })
    .catch(() => {
 
    })
  
};
</script>

<style lang="scss">
.px20 {
  padding: 0 20px;
}
.el-tabs__nav-next,
.el-tabs__nav-prev {
  font-size: 18px;
  color: #303133;
}

.drawerBox {
  position: fixed;
  width: 70%;
  height: 100px;
  min-height: calc(100% - 0px);
  z-index: 11120;
  bottom: 0;
  right: 0;
   padding:0 15px;
  box-shadow: -6px 0 6px rgba(0, 0, 0, 0.04);
  background-color: #fff;
  .drawerBox-title {
    font-size: 20px;
    font-weight: bold;
  }
}

.listDrawerBox-enter-active,
.listDrawerBox-leave-active {
  transition: all 0.5s ease;
}
.listDrawerBox-enter-from,
.listDrawerBox-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.operationContent{
 
}
</style>
